<template>
  <div
    class="my-container"
    :style="{
                  width: detail.position.w-5 + 'px',
                  height: detail.position.h-5 + 'px',
             }"
  >
    <q-knob
      v-model="myData"
      :color="param.trackColor"
      :center-color="param.centerColor"
      :thickness="param.thickness / 100"
      class="my-knob"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, toRefs, watch } from 'vue';
import { CVariableDataItem, CGraphEntity, CDynamicDataItem, CDataNode } from 'stores/editorModels';
import { CFormPropertyItem } from './formViewModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';


export default defineComponent({
  name: 'ViewFormKnobButton',
  props: {
    detail: {
      type: Object,
      default: {} as CGraphEntity
    },
    dynamicData: {
      type: Array as PropType<CVariableDataItem[]>,
      default: () => {
        return [] as CVariableDataItem[]
      }
    }
  },

  setup (props, context) {
    //数据解构
    let {
      detail,
      dynamicData
    } = toRefs(props);

    //错误通知
    const {
      showMessage
    } = useMessageNotify();

    //响应数据
    let param = ref<CFormPropertyItem>({
      trackColor: 'primary',
      centerColor: 'grey',
      thickness: 30    //放大了100倍
    });

    //数据部分
    let xyData = ref<CDynamicDataItem[]>([]);
    let myData = ref(1);

    //属性更新
    const configProperty = () => {
      //生成属性配置
      if ((detail.value?.propsItem) &&
        (detail.value?.propsItem.length > 0)) {
        let i = 0;
        let num;
        param.value.trackColor = detail.value.propsItem[i++].value;
        param.value.centerColor = detail.value.propsItem[i++].value;
        num = parseInt(detail.value.propsItem[i++].value);
        if (!isNaN(num)) {
          param.value.thickness = num;
        } else {
          showMessage('FormKnobButton属性值不是数字！');
        }
      } else {
        showMessage('FormKnobButton组件属性设置错误');
      }

      //生成数据节点
      if ((detail.value?.dataItem) && (detail.value?.dataItem.length > 0)) {
        xyData.value.length = 0;
        detail.value.dataItem.forEach((item: CDataNode) => {
          xyData.value.push({
            vid: item.variableValue,
            name: item.nodeValue,
            value: 0
          });
        });
      }
    }

    //更新数据
    const refreshDynamicData = () => {
      //动态数据
      if ((dynamicData.value) && (dynamicData.value.length > 0)) {
        dynamicData.value.forEach((el, index) => {
          if (xyData.value[index].vid === el.varId) {
            xyData.value[index].value = el.vData;
          }
        });
      }

      //数据
      if (xyData.value.length > 0) {
        myData.value = xyData.value[0].value;
      }
    }

    //初始化
    const init = () => {
      configProperty();
      refreshDynamicData();
    }

    //监视属性变化
    watch(() => detail, () => {
      configProperty();
    }, { deep: true });

    //监视变量变化
    // watch(() => dynamicData, () => {
    //   refreshDynamicData();
    // }, { deep: true })

    // 挂载组件
    onMounted(() => {
      init();
    });


    return {
      detail,
      myData,
      param
    };
  }
});
</script>

<style lang="scss" scoped>
.my-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px;
  background: transparent;

  .my-knob {
    padding: 5px;
    text-align: center;

    width: 90%;
    height: 90%;
  }
}
</style>
